<template>
    <el-footer class="footer animate__fadeInUp animate__animated forbid-select default-style">
        <div class="flex-display-center" style="height: 50%;">
            <div class="webInfo contact">
                <div class="beian">联系我们：
                    <span>{{ webInfo.email }}</span>
                </div>
            </div>
            <div class="show-time">{{ now.format('YYYY年M月D日 星期dd H时m分s秒') }}</div>
        </div>
        <div class="flex-display-center" style="height: 50%;">
            <div class="webInfo beian-copyright">
                <div class="beian beian_gov" v-if="webInfo.icpNumber" @click="intoGovBeian">{{
                    webInfo.icpNumber }}</div>
                <div class="beian beian_gov" style="display: flex" v-if="webInfo.gaNumber" @click="intoGABeian">
                    <img :src="beian" class="beianImg" alt="beian">
                    <div style="margin-left: 5px">{{ webInfo.gaNumber }}</div>
                </div>
                <div class="beian">{{ copyRightInfo }}</div>
            </div>
        </div>
    </el-footer>
</template>

<script setup>
import { useMainStore } from "@/pinia"
import beian from "@/assets/image/beian.png"
import { useNow } from '@vueuse/core'
import { storeToRefs } from "pinia"

const { now } = useNow({ controls: true, interval: 1000 })

const { getWebInfo: webInfo } = storeToRefs(useMainStore())

// 网站版权信息
const copyRightInfo = computed(() => {
    return "Copyright@ 2023 - " + new Date().getFullYear() + " " + webInfo.value.websiteName + "/" + webInfo.value.domain + " All  Rights Reserved"
})
// 打开公安备案
const intoGABeian = () => {
    window.open('https://beian.mps.gov.cn/#/query/webSearch?code=32080402000277', '_blank')
}
// 打开网站备案
const intoGovBeian = () => {
    window.open('https://beian.miit.gov.cn/#/Integrated/index', '_blank');
}
</script>

<style scoped lang="scss">
.el-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    max-height: 60px;
    color: #ffffff;

    @media screen and (min-width: 1000px) and (max-width: 1250px) {
        height: 60px !important;
    }
}

:deep(.beianImg) {
    width: 17px;
    height: 17px;
    margin: auto;
}

:deep(.webInfo) {
    display: flex;
    padding: 5px 0;
}

:deep(.beian+.beian) {
    margin-left: 20px;
}

:deep(.beian_gov:hover) {
    text-decoration: underline
}

.show-time {
    width: 300px;
    text-align: right;
}

.mobile .show-time {
    width: 55%;
    text-align: center;
}

.mobile .el-footer {
    padding: 0;
    margin: 0;
    bottom: 5px;
    height: auto;
    max-height: unset;
    position: absolute;
    font-size: 12px !important;
}

.mobile .contact {
    width: 45%;
    text-align: center;

    .beian {
        width: 100%;
    }
}

.mobile .beian-copyright {
    flex-wrap: wrap;
    padding-top: 0;

    .beian+.beian {
        margin: 0;
    }

    .beian_gov:first-child {
        width: 45% !important;
        text-align: center
    }

    .beian_gov:nth-child(2) {
        width: 55% !important;
        text-align: center;
        justify-content: center;
    }

    .beian {
        width: 100%;
        text-align: center;
        margin-top: 10px !important;
    }

    .beianImg {
        margin: 0;
    }
}
</style>